<template>
  <div class="settings-panel">
    <h2>设置</h2>
    
    <div class="setting-group">
      <h3>主题</h3>
      <el-radio-group v-model="store.settings.theme" @change="onThemeChange">
        <el-radio label="light">亮色主题</el-radio>
        <el-radio label="dark">暗色主题</el-radio>
      </el-radio-group>
    </div>
    
    <div class="setting-group">
      <h3>字体大小</h3>
      <el-slider 
        v-model="store.settings.fontSize" 
        :min="12" 
        :max="24" 
        :step="1" 
        show-input
        @change="onFontSizeChange"
      />
    </div>
    
    <div class="setting-group">
      <h3>编辑器宽度</h3>
      <el-slider 
        v-model="store.settings.editorWidth" 
        :min="30" 
        :max="70" 
        :step="1" 
        show-input
        @change="onEditorWidthChange"
      />
    </div>
    
    <div class="setting-group">
      <el-button type="primary" @click="resetSettings">重置设置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '../store'

const store = useAppStore()

// 主题切换（持久化到注册表）
const onThemeChange = (value: 'light' | 'dark') => {
  store.setTheme(value)
}

// 字体大小变化（持久化到注册表）
const onFontSizeChange = (value: number) => {
  store.updateFontSize(value)
}

// 编辑器宽度变化（持久化到注册表）
const onEditorWidthChange = (value: number) => {
  store.updateEditorWidth(value)
}

// 重置设置到默认值（并持久化）
const resetSettings = () => {
  store.setTheme('light')
  store.updateFontSize(16)
  store.updateEditorWidth(50)
}
</script>

<style scoped>
.settings-panel {
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.setting-group {
  margin-bottom: 20px;
}

.setting-group h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.el-slider {
  margin-top: 10px;
}
</style>